
<template >
  <div v-if="showProjectMgr == 1" class="in-buiding" >建 设 中 ...</div>
  <div v-else-if="showProjectMgr == 2" class="app-container home">
    <el-row type="flex" justify="center">
      <el-col  :span="12" >
        <h2 align="center">项目管理看板</h2>
      </el-col>
    </el-row>
    <el-divider />
    <el-row >
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >

        <el-form-item label="时间" prop="checkInfoTime">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <right-toolbar
          :showSearch.sync="showSearch"
        ></right-toolbar>
      </el-row>

      <el-table
        v-loading="loading"
        :data="deviceCorrosionInfoList"
        :row-style="{height: '72px'}"
        border
      >
        <el-table-column label="项目名称" align="center" width="180" prop="devId" >
          <template slot-scope="scope">
            <span>{{ scope.row.pName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目状态" align="center" width="100">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.device_status"
              :value="scope.row.projectStatus"
            />
          </template>
        </el-table-column>
        <el-table-column label="项目进度" align="center"  prop="item">
          <template slot-scope="scope">
            <vue-horizontal-timeline :items="scope.row.item" lineColor="#e9e9e9" minWidth="100" />
          </template>
        </el-table-column>
        <el-table-column label="当前责任人" align="center" width="100" prop="devId" >
          <template slot-scope="scope">
            <span :style="classObje(scope.row)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page-sizes="[50, 100, 200]"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
      />
    </el-row>
  </div>
</template>

<script>
// 时间轴
import VueHorizontalTimeline from '@/components/HorizontalTimeline';
import { getInfo } from '@/api/login'

//import { VueHorizontalTimeline } from "vue-horizontal-timeline";

export default {
  name: "Index",
  dicts: ["device_status"],
  components: {
    //horizontalTimeline,
    VueHorizontalTimeline
  },
  data() {
    const example1 = {
      stepCssClass: 'has-step-green',
      boxCssClass: 'timebox-css-green',
      title: "开始",
      content: '2025-01-01'
    };
    const example2 = {
      stepCssClass: 'has-step-green',
      boxCssClass: 'timebox-css-green',
      title: "硬件设计",
      content: '2025-02-01'
          };
    const example22 = {
      title: "硬件设计",
      stepCssClass: 'has-step-red',
      boxCssClass: 'timebox-css-red',
      content: '2025-02-01'
    };
    const example23 = {
      title: "硬件设计",
      stepCssClass: 'has-step-grey',
      boxCssClass: 'timebox-css-grey',
      content: '2025-02-01'
    };

    const example3 = {
      title: "嵌入式开发",
      stepCssClass: 'has-step-green',
      boxCssClass: 'timebox-css-green',
      content: '2025-02-15'
    };
    const example32 = {
      title: "嵌入式开发",
      TitleClass: "color: red",
      stepCssClass: 'has-step-red',
      boxCssClass: 'timebox-css-red',
      content: '2025-02-15'
    };
    const example33 = {
      title: "嵌入式开发",
      stepCssClass: 'has-step-grey',
      boxCssClass: 'timebox-css-grey',
      content: '2025-02-15'
    };
    const example4= {
      title: "软件联调",
      stepCssClass: 'has-step-green',
      boxCssClass: 'timebox-css-green',
      content: '2025-02-25'
    };
    const example42= {
      title: "软件联调",
      stepCssClass: 'has-step-red',
      boxCssClass: 'timebox-css-red',
      content: '2025-02-25'
    };
    const example43= {
      title: "软件联调",
      stepCssClass: 'has-step-grey',
      boxCssClass: 'timebox-css-grey',
      content: '2025-02-25'
    };
    const example5 = {
      title: "质量部",
      stepCssClass: 'has-step-green',
      boxCssClass: 'timebox-css-green',
      content: '2025-03-01'
          };
    const example52 = {
      title: "质量部",
      TitleClass: 'color: red',
      stepCssClass: 'has-step-red',
      boxCssClass: 'timebox-css-red',
      content: '2025-03-01'
    };
    const example53 = {
      title: "质量部",
      stepCssClass: 'has-step-grey',
      boxCssClass: 'timebox-css-grey',
      content: '2025-03-01'
    };
    const example6 = {
      title: "结项",
      stepCssClass: 'has-last-green',
      boxCssClass: 'timebox-css-green-last',
      content: '2025-04-01'
    };
    const example63 = {
      title: "结项",
      stepCssClass: 'has-last-grey',
      boxCssClass: 'timebox-css-grey-last',
      content: '2025-04-01'
    };
    const items = [example1, example2, example3, example4, example5, example6];
    const items2 = [example1, example3, example3, example52, example63];
    const items3 = [example1, example23, example33, example43, example53, example63];
    const items5 = [example1, example2, example3, example43, example53, example63];
    const projectItem = {pName: "FF H1组态软件优化", projectStatus: 0, item:items, name: '完成'};
    const projectItem2 = {pName: "NCS-TT306功能安全", projectStatus: 1, item:items2, name: '李四'};
    const projectItem3 = {pName: "Modbus转HART系列模块整改", projectStatus: 0, item:items3, name: '王小虎'};
    const projectItem4 = {pName: "NCS-PT105无线压变", projectStatus: 1, item:items2, name: '赵六'};
    const projectItem5 = {pName: "信东仪表FF/HART总线金属管转子流量计认证", projectStatus: 0, item:items5, name: '雪峰'};
    const deviceCorrosionInfoList = [projectItem, projectItem2, projectItem3, projectItem4, projectItem5];

    return {
      // 版本号
      version: "3.8.4",
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 设备数据
      deviceCorrosionInfoList,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
      },
      showProjectMgr:0
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      getInfo().then(res => {
        const user = res.user;
        console.log(user.userName)
        if(user.userName.indexOf("guest") != -1)
        {
          this.showProjectMgr = 1;
        }
        else
        {
          this.showProjectMgr = 2;
        }

      })
    },
    /** 搜索按钮操作 */
    handleQuery() {

    },
    /** 重置按钮操作 */
    resetQuery() {

    },
    classObje(row){
      if(row.projectStatus == 1){
        return 'color:red'
      }
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

}
.in-buiding {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #aaa;
     font-size: 30px;
     font-weight: 600;
}
</style>

<style>
.timebox-css-red {
  color: #ff4949 !important;
  left: 10px !important;
  background: #ffeded !important;
}
.timebox-css-grey{
  color: grey !important;
  left: 10px !important;
}

.timebox-css-green {
   color: #13ce66 !important;
   left: 10px !important;
   background: #e7faF0 !important;
 }

.timebox-css-green-last {
  color: #13ce66 !important;
  left: 10px !important;
  width: 70px !important;
  background: #e7faF0 !important;
}

.timebox-css-grey-last {
  color: grey !important;
  left: 10px !important;
  width: 70px !important;
}

.has-step-red {
  background: red !important;
  left: 0px !important;
}

.has-step-red::after {
  background: red !important;
  left: 0px !important;
}

.has-step-green {
  background: green !important;
  left: 1px !important;
}
.has-step-green::after {
  background: green !important;
  left: 0px !important;
}

.has-step-grey {
  background: grey !important;
  left: 1px !important;
}
.has-step-grey::after {
  background: grey !important;
  left: 0px !important;
}

.has-last-grey{
  background: grey !important;
  width: 14px !important;
  left: 0px !important;
}
.has-last-grey::after{
  background: grey !important;
  width: 14px !important;
  left: 0px !important;
}

.has-last-green{
  background: green !important;
  width: 14px !important;
  left: 0px !important;
}
.has-last-green::after{
  background: green !important;
  width: 14px !important;
  left: 0px !important;
}
</style>
